<template>
	<div style="float: right;z-index: 999999;text-align: right;line-height: 40px;padding-right: 20px;">
		<el-button type="success" size="small" @click="to_print">打印</el-button>
		<el-button type="primary" size="small" @click="setTemplate">保存</el-button>
		<el-button type="danger" size="small" @click="downExcelData">导出</el-button>
	</div>
	<div id="luckysheet">
	</div>
	<printDialog v-if="dialog.print" ref="printDialog" @closed="printClose"></printDialog>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
import printDialog from '@/views/bi/excel/setting/print'
import saveDialog from './save'
export default {
	emits: ['success', 'closed'],
	components: {
		printDialog,
		saveDialog
	},
	data() {
		return {
			dialog:{
				print:false,
				save:false
			},
			sheetData:[],
			title:'',
			recordId: this.$route.query.recordId,
			form: {
				recordId:"",
				title:"",
				version:"",
				remark:""
			},
		}
	},
	mounted() {
		this.getBiExcelDataById();
	},
	methods: {
		downExcelData() {
			this.$API.bi.excel.downExcelReport.fileDownload({recordId:this.recordId});
		},
		printClose()
		{
			location. reload();
		},
		async getBiExcelDataById() {
			var res = await this.$API.bi.excel.getBiExcelDataById.get({recordId: this.recordId});
			if (res.code == 200) {
				this.form.recordId = res.data.recordId
				this.form.title = res.data.title;
				this.form.version = res.data.version;
				this.form.remark = res.data.remark;
				this.sheetData = JSON.parse(res.data.dataJson);
				this.title = res.data.title+"[编辑]";
				window.luckysheet.create({
					container: 'luckysheet',
					title: this.title,
					lang: 'zh',
					allowEdit: true,
					//plugins: ['chart'],
					forceCalculation: false,
					showsheetbarConfig: {
						add: false,
					},
					data: this.sheetData
				})
				document.querySelector('.luckysheet_info_detail_back').remove();
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		to_print() {
			const html = window.luckysheet.getRangeHtml();
			document.querySelector('#luckysheet').style.display = 'none';
			this.dialog.print = true
			this.$nextTick(() => {
				this.$refs.printDialog.open().setData(html)
			})
		},
		async handleSuccess(data) {
			var dataJson = window.luckysheet.getAllSheets();
			let params =data;
			params.dataJson =JSON.stringify(dataJson);
			var res = await this.$API.bi.excel.updateBiExcelData.post(params);
			if (res.code == 200) {
				this.$message.success("操作成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async setTemplate() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open().setData(this.form)
			})
		},
	}
}
</script>

<style scoped>
.customWidth {
	width: 60%;
}

#luckysheet {
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 100%;
	left: 0px;
	top: 0px;
	bottom: 0px;
}

#uploadBtn {
	font-size: 16px;
}

#tip {
	position: absolute;
	z-index: 1000000;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	background: rgba(255, 255, 255, 0.8);
	text-align: center;
	font-size: 40px;
	align-items: center;
	justify-content: center;
	display: flex;
}
</style>
